<template>
	<view class="with-navbar">
		<juhe-all></juhe-all>
		<juhe-navbar :options="navbarData"></juhe-navbar>
		<view class="ul with-have-no-mt">
			<view class="li-box" @click="showToast()">
				<view class="li">
					<view class="name">提示 Toast</view>
					<view class="more iconfont" style="flex: 1;">&#xe856;</view>
				</view>
			</view>
			<view class="li-box" @click="showModals()">
				<view class="li">
					<view class="name">模态框 Modals</view>
					<view class="more iconfont" style="flex: 1;">&#xe856;</view>
				</view>
			</view>

			<view class="li-box" @click="showActions()">
				<view class="li">
					<view class="name">操作菜单 Action Sheet</view>
					<view class="more iconfont" style="flex: 1;">&#xe856;</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import JuheNavbar from '../../components/juhe-navbar.vue';
export default {
	components: {
		JuheNavbar
	},
	data() {
		return {
			navbarData: {
				leftIcons: [
					{
						icon: 'icon-arrowleft'
					}
				],
				rightIcons: [],
				tabs: {
					list: [
						{
							text: '交互'
						}
					]
				}
			}
		};
	},
	methods: {
		showToast() {
			this.$store.state.toastOptions = [
				{
					type: 'success',
					text: '这里是提示信息这里是提示信息这里是提示信息这里是提示信息',
					show: true
				},
				{
					type: 'danger',
					text: '这里是提示信息这里是提示信息这里是提示信息这里是提示信息',
					show: true
				},
				{
					type: 'info',
					text: '这里是提示信息这里是提示信息这里是提示信息这里是提示信息',
					show: true
				},
				{
					type: 'warning',
					text: '这里是提示信息这里是提示信息这里是提示信息这里是提示信息',
					show: true
				}
			];
		},
		showActions() {
			this.$store.state.actionsSheetOptions = [
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					chanelText: '取消',
					allocatedClose: true,
					type: 'info',
					list: [
						{
							name: '这里是选项'
						},
						{
							name: '这里是选项'
						},
						{
							name: '这里是选项'
						},
						{
							name: '这里是选项'
						}
					]
				}
			];
		},
		showModals() {
			this.$store.state.modalsOptions = [
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					chanelText: '取消',
					okText: '确定',
					allocatedClose: true,
					type: 'success'
				},
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					chanelText: '取消',
					okText: '确定',
					allocatedClose: false,
					type: 'danger'
				},
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					okText: '确定',
					allocatedClose: false,
					type: 'info'
				},
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					okText: '确定',
					allocatedClose: false,
					type: 'warning'
				},
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					okText: '确定',
					allocatedClose: false
				},
				{
					show: true,
					title: '这里是标题',
					content: '这里是内容',
					okText: '确定',
					allocatedClose: false
				}
			];
		}
	}
};
</script>

<style lang="scss"></style>
